<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>详情页</title>
    <script src="js/api.js"></script>
    <script src="js/axios.min.js"></script>
    <script src="js/jq,mini.js"></script>
    <link rel="stylesheet" href="css/index.css" />
    <link rel="stylesheet" href="swiper-master/package/swiper-bundle.min.css" />
    <link rel="stylesheet" href="css/details.css" />
  </head>

  <body>
    <div class="header-top">
      <div class="wap-header">
        <div class="header-logo">
          <a href="./index.html"><img src="img/home.jpg" alt="" /></a>
        </div>
        <ul class="header-list">
          <li>
            <a href="./denglu.html">登录</a>
            <a href="./zuce.html">注册</a>
          </li>
          <li style="cursor: context-menu; color: #999">|</li>
          <li>
            <a href="./shop.html">购物车</a>
            <ul>
              <li>123</li>
              <li><a href="">商品列表</a></li>
            </ul>
          </li>
          <li style="cursor: context-menu; color: #999">|</li>
          <li>
            <a href="#">消息</a>
            <div>
              <a href=""><span>动态</span><small>0</small></a>
              <a href=""><span>评论</span><small>0</small></a>
              <a href=""><span>私信</span><small>0</small></a>
              <a href=""><span>喜欢</span><small>0</small></a>
              <a href=""><span>通知</span><small>0</small></a>
              <a href=""><span>粉丝</span><small>0</small></a>
            </div>
          </li>
          <li style="cursor: context-menu; color: #999">|</li>
          <li>
            <a href="#">添加良品</a>
          </li>
          <li>
            <a href="#"> 资质证照/协议规则 </a>
          </li>
        </ul>
      </div>
    </div>
    <!-- 二级菜单 -->
    <div class="wap_xuanfu">
      <div class="xuanfu">
        <ul class="xuanfu-caidan">
          <a href="./index.html" class="xuanfu-shouye">首页</a>
          <li>
            <a href="">商店</a>
            <!-- <div style="width: 1000px;height: 100px;
          background: #fff;"></div> -->
          </li>
          <li><a href="">杂志</a></li>
          <li><a href="">分享</a></li>
          <li><a href="">达人</a></li>
          <li><a href="">有偿咨询</a></li>
        </ul>
        <div class="xuanfu-shousuo">Q</div>
      </div>
    </div>
    <script>
      var oNav = document.querySelector(".wap_xuanfu");
      window.onscroll = function () {
        var scrollTop =
          document.documentElement.scrollTop || document.body.scrollTop;
        if (scrollTop >= 10) {
          oNav.style.position = "fixed";
          oNav.style.top = 0;
        } else {
          oNav.style.position = "absolute";
          oNav.style.top = "56px";
        }
      };
    </script>

    <div id="man">
      <!--   <div class="tupian">
      <img src="img/280128.jpg" alt="">
    </div>
    <div class="biaoti">
      <h1>金子</h1>
      <h3>是金子总护法管的</h3>
      <p class="money"><span>价格：</span><span>￥75</span></p>
      <p>免运费&nbsp;&nbsp;绝对正品</p>
      <div class="rongliang">
        容量:&nbsp;&nbsp;
        <span class="hezi">100</span>
      </div>
      <div class="shuliang">
        数量：&nbsp;&nbsp;
        <button>-</button>
        <input type="text" value="1">
        <button>+</button>
      </div>
      <button class="anniu">立即购买</button><br>
      <a href="" class="shop">加入购物车</a>
    </div>

  </div> -->
    </div>
    <script>
      let pid = location.search.split("=")[1];
      console.log(pid);
      $.get("http://jx.xuzhixiang.top/ap/api/detail.php", {
        id: pid,
        pagesize: 1,
        pagenum: 1,
      }).then((res) => {
        console.log(res);
        let data = res.data;
        console.log(data);

        let str = `
           <div class="tupian">
            <img src="${data.pimg}" alt="">
          </div>
          <div class="biaoti">
            <h1>${data.pname}</h1>
            <h3>${data.pdesc}</h3>
            <p class="money"><span>价格：</span><span>￥${data.pprice}</span></p>
            <p>免运费&nbsp;&nbsp;绝对正品</p>
            <div class="rongliang">
              容量:&nbsp;&nbsp;
              <span class="hezi">100</span>
            </div>
            <div class="shuliang">
              数量：&nbsp;&nbsp;
              <button>-</button>
              <input type="text" value="1" class="pnum-ipt">
              <button onclick="add()" class="add">+</button>
            </div>
             <button class="shop">加入购物车</a>
            <button class="anniu"><a href="./shop.html" style="color:#fff">我的购物车</a></button><br>
           
          </div>    
`;
        /* 
      <div class="tupian">
            <img src="img/${data.pimg}" alt="">
          </div>
          <div class="biaoti">
            <h1>${data.pame}</h1>
            <h3>${data.pdesc}</h3>
            <p class="money"><span>价格：</span><span>￥${data.pid}</span></p>
            <p>免运费&nbsp;&nbsp;绝对正品</p>
            <div class="rongliang">
              容量:&nbsp;&nbsp;
              <span class="hezi">100</span>
            </div>
            <div class="shuliang">
              数量：&nbsp;&nbsp;
              <button>-</button>
              <input type="text" value="1">
              <button class="add">+</button>
            </div>
            <button class="anniu"><a href="./shop.html">我的购物车</a></button><br>
            <button class="shop">加入购物车</button>
          </div>

        </div>
       */
        $("#man").html(str);
        let caradd = document.querySelector(".shop");
        console.log(caradd);
        caradd.onclick = async function () {
          let uid = localStorage.getItem("uid");
          let pnumIpt = document.querySelector(".pnum-ipt");
          let pnum = pnumIpt.value;
          let params = {
            uid,
            pid,
            pnum,
          };
          console.log(params);
          let { data } = await axios.get(CarAddAPI, {
            params,
          });
          console.log(data);
        };
      });
    </script>
    <script>
      function add() {
        let ad = document.querySelectorAll(".add");
        ad.value = parseInt(ad.value + 1);
      }
    </script>
    <div id="service">
      <a href="">
        <p class="hand" style="left: 0px"></p>
      </a>
      <div class="slogen">
        <dl class="fore1">
          <dt></dt>
          <dd>
            <p class="chinesetop">全球精品</p>
            <p class="english">Global Selections</p>
          </dd>
          <p class="clr"></p>
        </dl>
        <dl class="fore2">
          <dt></dt>
          <dd>
            <p class="chinesetop">正品保证</p>
            <p class="english">Authenticity Guaranteed</p>
          </dd>
          <p class="clr"></p>
        </dl>
        <dl class="fore3">
          <dt></dt>
          <dd>
            <p class="chinesetop">全场包邮</p>
            <p class="english">Free Delivery</p>
          </dd>
          <p class="clr"></p>
        </dl>
        <dl class="fore4">
          <dt></dt>
          <dd>
            <p class="chinesetop phonehm"></p>
            <p class="english">工作日 09:00-18:00</p>
          </dd>
          <p class="clr"></p>
        </dl>
        <p class="clr"></p>
      </div>
    </div>
    <div id="footer">
      <div class="footer-wap">
        <div class="footer-lf">
          <a
            style="display: block; height: 44px; width: 196px"
            href=""
            target="_blank"
          >
            <div class="download">
              <p class="iPhone">
                <span class="numLeFont">iPhone Android</span>
              </p>
              <p class="client-down">客户端下载</p>
              <div class="download-code" style="display: none">
                <dl class="iPhone">
                  <dt></dt>
                  <dd>下载iPhone版</dd>
                </dl>
                <dl class="android">
                  <dt></dt>
                  <dd>下载Android版</dd>
                </dl>
                <p class="clr"></p>
              </div>
            </div>
          </a>
          <div class="friendly">
            <p class="toplink">
              <a href="/i/our/" target="_blank" class="first">关于良仓</a
              ><a href="" target="_blank" rel="nofollow">服务协议</a
              ><a href="" target="_blank" rel="nofollow">隐私保护政策</a
              ><a href="/i/our/help/" target="_blank" rel="nofollow">使用指南</a
              ><a href="" target="_blank" rel="nofollow">联系我们</a
              ><a href="" target="_blank" rel="nofollow">加入我们</a
              ><a href="" target="_blank" rel="nofollow">友情链接</a
              ><a href="javascript:;" class="contactUs">私信良仓</a>
            </p>
            <p>
              <span class="numLeFont">©</span>&nbsp;2013-2019
              北京良仓文化传播有限公司版权所有&nbsp;
            </p>
            <p>
              &nbsp;&nbsp;公司名称：北京良仓文化传播有限公司&nbsp;&nbsp;电话：010-58696733
            </p>
            <p>&nbsp;&nbsp;公司地址：北京朝阳区百子湾路32号6号楼1层60号.</p>
            <p>
              &nbsp;&nbsp;社会信用统一代码：91110105059231575L&nbsp;&nbsp;食品许可证：JY11105160159557&nbsp;&nbsp;
            </p>
            <p>
              &nbsp;&nbsp;图书证名称：中华人民共和国出版物经营许可证&nbsp;&nbsp;图书证编号：新出发京零
              字第 朝 150051 号&nbsp;&nbsp;
            </p>
            <p>
              <a href="" target="_blank">
                <span style="margin-left: 3px">京</span
                ><span class="numLeFont">ICP</span>备<span class="numLeFont"
                  >13010677</span
                >号<span class="numLeFont">-1</span></a
              >&nbsp;京公网安备<span class="numLeFont">11010502025627</span>
            </p>
          </div>
        </div>
        <div class="footRight text-r fr">
          <p class="clr"></p>
          <div class="commun">
            <ul>
              <li>
                <a
                  class="douban"
                  href=""
                  target="_blank"
                  style="opacity: 0.2"
                ></a>
              </li>
              <li>
                <a
                  class="sina"
                  href=""
                  target="_blank"
                  style="opacity: 0.2"
                ></a>
              </li>
              <li>
                <a
                  class="wechat weixin"
                  href="javascript:void(0)"
                  style="opacity: 0.2"
                >
                  <div class="wechat-code" style="display: none"><s></s></div>
                </a>
              </li>
              <p class="clr"></p>
            </ul>
          </div>
          <!-- <div class="links">
            <p style="margin-bottom:6px;"><span class="numLeFont">4008-976-336</span></p>
            <p>工作日&nbsp;<span class="numLeFont">00:00-19:00</span></p>
          </div>
           -->
        </div>
        <!-- <div class="links">
            <p style="margin-bottom:6px;"><span class="numLeFont">4008-976-336</span></p>
            <p>工作日&nbsp;<span class="numLeFont">00:00-19:00</span></p>
          </div>
           -->
      </div>
    </div>

    <script src="swiper-master/package/swiper-bundle.min.js"></script>
    <script>
      var swiper = new Swiper(".swiper-container", {
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        autoplay: true,
      });
    </script>
  </body>
</html>
